import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
import { NavigationProp } from "@react-navigation/native";

type Props = {
  navigation: NavigationProp<ReactNavigation.RootParamList>
}

const SettingStyle = StyleSheet.create({
  title: { flex: 1, color: "black", fontSize: 13 },
  icon: { width: 24, height: 24 },
  item: { flexDirection: "row", height: 58, alignItems: "center", justifyContent: "flex-end", marginEnd: 16 },
  content: { flex: 1, paddingStart: 16, backgroundColor: "white" },
  demarcation: { flex: 1, backgroundColor: "#00000010", height: 1 }
});

const Setting = (props: Props) => {
  return <ScrollView style={{ backgroundColor: "#00000003" }}>
    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          账号管理
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
      <View style={SettingStyle.demarcation} />
    </View>

    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          权限管理
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
    </View>

    <View style={{ ...SettingStyle.content, marginTop: 8 }}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          版本更新
        </Text>
        <Text style={{ fontSize: 12 }}>
          6.0.1
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
      <View style={SettingStyle.demarcation} />
    </View>

    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          关于我们
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
      <View style={SettingStyle.demarcation} />
    </View>

    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          清理缓存
        </Text>
        <Text style={{ fontSize: 12 }}>
          4.97MB
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
    </View>

    <View style={{ ...SettingStyle.content, marginTop: 8 }}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          消息通知
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
      <View style={SettingStyle.demarcation} />
    </View>

    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          加入白名单
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
      <View style={SettingStyle.demarcation} />
    </View>

    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          通知管理
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
      <View style={SettingStyle.demarcation} />
    </View>

    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          个性化推荐
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
      <View style={SettingStyle.demarcation} />
    </View>

    <View style={SettingStyle.content}>
      <View
        style={SettingStyle.item}>
        <Text style={SettingStyle.title}>
          弹窗测试
        </Text>
        <Image style={SettingStyle.icon} source={require("../img/usercenter_setting_ic_right.webp")} />
      </View>
    </View>


  </ScrollView>;
};

export default Setting;

